<template>
    <Space style="padding-bottom:10px;">
        <Button size="small" type="primary" icon="md-add" @click="add">添加</Button>
        <Button size="small" type="warning" icon="md-build" @click="edit">编辑</Button>
        <Button size="small" type="error" icon="md-close" @click="del">删除</Button>
    </Space>
    <Transfer filterable :data="funcList.data" :target-keys="targetList.data" @on-change="funcHandleChange"
        :operations="['移除', '授予']" :titles="['未授予', '已授予']" @on-selected-change="funcSel" :list-style="listStyle">
        <div :style="{ float: 'right', margin: '5px' }">
            <Button size="small" @click="initFunc">刷新</Button>
        </div>
    </Transfer>
    <AddOrUpdate ref="modal" @initFunc="initFunc"></AddOrUpdate>
</template>
<script setup>
import http from '@/util/http'
import AddOrUpdate from './AddOrUpdate.vue';
import bus from '@/util/bus'
let { proxy } = getCurrentInstance();
let funcList = reactive({ data: [] })
let menuID = reactive({ data: [] });
const emit = defineEmits(['getMenuData', 'getMenu', 'getRole'])
let prop = defineProps({ funcTargetList: [] });
let targetList = reactive({ data: [] });
let modal = ref();
let funcIDs = reactive({ data: [] })
let listStyle = reactive({
    width: '175px',
    height: '300px'
})
const initFunc = () => {
    http.get("/Basic/Func/List", {}, (response) => {
        funcList.data = response.data.data;
    });
}
initFunc();

watch(
    () => prop.funcTargetList,
    (value) => {
        targetList.data = value
    }
);

const funcHandleChange = (newTargetKeys, direction, moveKeys) => {
    menuID.data = [];
    if (direction === 'right') {
        bus.on('Fn', (e) => {
        });
    } else {
        emit("getMenu", {
            fn: (i) => {
                if (i.length === 0) {
                    proxy.$Message.warning("请选择菜单中的某个节点！");
                    return false;
                }
                i.forEach(element => {
                    menuID.data.push(element.id)
                });
                http.post("/Basic/Menu/RemoveFunc", { menuID: toRaw(menuID.data), funcID: moveKeys }, (response) => {
                    if (response.data.flag) {
                        targetList.data = newTargetKeys
                        proxy.$Message.success(response.data.msg);
                    } else {
                        proxy.$Message.error(response.data.msg);
                    }
                });
            }
        });

    }
}

const funcSel = (sourceSelectedKeys, targetSelectedKeys) => {
    funcIDs.data = sourceSelectedKeys
}

const add = () => {
    modal.value.show('');
}
const edit = () => {
    if (funcIDs.data.length != 1) {
        proxy.$Message.warning('请选择1个功能进行编辑！');
        return
    }
    modal.value.show(funcIDs.data[0]);
}
const del = () => {
    http.post("/Basic/Func/Del", { funcIDs: funcIDs.data }, (response) => {
        if (response.data.flag) {
            initFunc();
            proxy.$Message.success(response.data.msg);
        } else {
            proxy.$Message.error(response.data.msg);
        }
    });
}
</script>